// pages/home/home-nav/personal-overview/bpl/bpl-chart1/bpl-chart1.ts
import * as echarts from '../../../../../../components/ec-canvas/echarts';
import { initEcharts } from '../../../../../../utils/util';

var option = {
  grid: {
    x: 35, // 左
    y: 20, // 上
    x2: 10, // 右
    y2: 30, // 下
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['高压', '低压'],
    top: 5,
    right: 0,
  },
  xAxis: {
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '高压',
      type: 'line',
      data: [],
    },
    {
      name: '低压',
      type: 'line',
      data: [],
    },
  ],
};

Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true, // 延迟加载
    },
    pressuretype:<ChartData>{
      categories: ['2024-07-15', '2024-07-16', '2024-07-17', '2024-07-18', '2024-07-19', '2024-07-20', '2024-07-21'],
      data: [
        [140, 90], // 高压，低压
        [136, 88], // 高压，低压
        [144, 92], // 高压，低压
        [136, 90], // 高压，低压
        [130, 84], // 高压，低压
        [135, 90], // 高压，低压
        [140, 90], // 高压，低压
      ],
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeChart() {
      const canvasComponent = this.selectComponent("#bpl-chart1");
      const pressureData = {
        categories: this.data.pressuretype.categories,
        data: this.data.pressuretype.data,
      };
      const options = this.changeOptionsData(pressureData);
      initEcharts(options, canvasComponent);
    },
    changeOptionsData(initData: { categories: any; data: any; }) {
      option.xAxis.data = initData.categories;
      option.series[0].data = initData.data.map((item: any) => item[0]);
      option.series[1].data = initData.data.map((item: any) => item[1]);
      return option;
    },
    updateData(data: ChartData) {
      this.setData({
        pressuretype: data,
      })
      console.log(this.data.pressuretype)
      this.changeChart();
    }
  },
  
  /*
  * 组件所在页面的生命周期
  */
  pageLifetimes: {
    show: function () {
      this.changeChart();
    },
  },
  /*
  * 组件自己的生命周期
  */
  lifetimes: {
    attached: function () {
      this.changeChart();
    }
  }
});
